import { t } from 'i18next'
import React, { FC } from 'react'
import { Button, RadioGroup, Switch } from '@kedacom/react-next'
import { RowRendererProps } from './translator'
import { RightWrap, ListItemGhost } from '../../components'
import { ListEmpty, ListTop, ListBody, ListTopActionItem } from '@/components/List'
import { Droppable, Draggable, DragDropContextProvider } from '@/plugins/dnd'
import { FixedSizeList as List } from 'react-window'
import { ListItem } from './ListItem'
import { Wrap, Label, StyledPollSelectItem, BtnWrap, StyledPlanModal } from './style'
import { useData } from './hooks'
import AutoSizer from 'react-virtualized-auto-sizer'
import { Modal, Select, Input } from '@kedacom/react-next'
import shallow from 'zustand/shallow'
import { useMixStore } from './store'
import { revert_mt } from '@/api/manager/mt'
import { getCheckPreNameRule } from '@/utils'
import { useGlobalStore } from '@/store/global'

const rowRenderer = React.memo(({ data: list, index, style }: RowRendererProps) => {
	const rowData = list[index]
	const dataTransfer = () => {
		return {
			data: {
				mt: revert_mt(rowData.mcc),
			},
			from: 'mix',
		}
	}
	return (
		<Draggable
			style={style}
			index={index}
			dataTransfer={dataTransfer}
			ghostRender={<ListItemGhost data={rowData.mcc} />}
		>
			<ListItem {...rowData} />
		</Draggable>
	)
})
const Mix: FC = () => {
	const SWITCH = useGlobalStore((state) => state.SWITCH)

	const {
		inputRef,
		handleDrop,
		changePlan,
		deletePlan,
		handleReturnBack,
		savePlan,
		addPlan,
		startMix,
		stopMix,
		disabled,
	} = useData()
	const {
		state,
		planOptions,
		planValue,
		isSavePlanOpen,
		name,
		mode,
		update,
		mute,
		custom_mix_list,
		intelligent_mix_list,
		changeMode,
		muteOption,
		removeBatchMt,
	} = useMixStore(
		(state) => ({
			list: state.list,
			update: state.update,
			mode: state.mode,
			state: state.state,
			planOptions: state.planOptions,
			preName: state.preName,
			planValue: state.planValue,
			isSavePlanOpen: state.isSavePlanOpen,
			name: state.name,
			mute: state.mute,
			custom_mix_list: state.custom_mix_list,
			intelligent_mix_list: state.intelligent_mix_list,
			changeMode: state.changeMode,
			muteOption: state.muteOption,
			changeMix: state.changeMix,
			removeBatchMt: state.removeBatchMt,
		}),
		shallow
	)
	const optionBtn = () => {
		return (
			<BtnWrap className="mix-btns__i18n">
				{state === 0 && <Button onClick={startMix}>{t('开始混音')}</Button>}
				{state === 1 && (
					<Button onClick={stopMix} style={{ color: '#c62619' }}>
						{t('结束混音')}
					</Button>
				)}
			</BtnWrap>
		)
	}
	const topActionsDel: ListTopActionItem[] = [
		{
			text: t('删除'),
			onClick: removeBatchMt,
		},
	]
	const topActions: ListTopActionItem[] = [
		{
			text: t('删除'),
			onClick: removeBatchMt,
		},
		{
			text: t('清空'),
			onClick: () => {
				update({ custom_mix_list: [], intelligent_mix_list: [] })
			},
		},
	]
	return (
		<RightWrap title={t('混音')} onBack={handleReturnBack} action={optionBtn()}>
			<Wrap>
				<Label title={t('混音预案')}>{t('混音预案')}</Label>
				<Select
					width={115}
					options={planOptions}
					value={planValue}
					disabled={disabled}
					onClick={(e, v) => changePlan(v)}
					optionRender={(option, selected) => (
						<StyledPollSelectItem className={selected ? 'selected' : ''}>
							<span className="select-icon"></span>
							<span className="text" title={option.label}>
								{option.label}
							</span>
							{option.value !== '0' && (
								<span
									className="delete-icon"
									onClick={(e) => {
										e.stopPropagation()
										deletePlan(option as { label: string; value: string })
									}}
								>
									×
								</span>
							)}
						</StyledPollSelectItem>
					)}
				/>
				<Button onClick={savePlan} style={{ margin: '0 0 0 10px' }} className="save-mix-pre__i18n">
					{t('保存预案')}
				</Button>
			</Wrap>
			<Wrap>
				<Label title={t('混音模式')}>{t('混音模式')}</Label>
				<RadioGroup
					value={mode}
					disabled={disabled}
					options={[
						{ label: t('智能混音', { context: 'SC1' }), value: 1, width: 100 },
						{ label: t('定制混音', { context: 'SC1' }), value: 2, width: 100 },
					]}
					onChange={(e, value) => {
						changeMode(value)
					}}
				/>
			</Wrap>
			{mode === 2 && (
				<Wrap>
					<Label title={t('全部哑音')}>{t('全部哑音')}</Label>
					<Switch
						disabled={state === 0}
						checked={!!mute}
						onChange={(e, v) => {
							muteOption(Number(v))
						}}
					/>
				</Wrap>
			)}
			{mode === 1 && state === 1 && (
				<ListTop title={t('混音列表')} num={intelligent_mix_list.length} actions={[]} />
			)}
			{mode === 2 && (
				<ListTop
					title={t('混音列表')}
					num={custom_mix_list.length}
					actions={state === 1 ? topActionsDel : topActions}
				/>
			)}
			<ListBody _height={125} isHideOrder={true}>
				{mode === 1 && state === 1 && (
					<AutoSizer>
						{({ width, height }) => (
							<DragDropContextProvider>
								<Droppable onDrop={handleDrop}>
									{(setDroppableRef) => (
										<List
											width={width}
											height={height}
											itemCount={intelligent_mix_list.length}
											itemSize={32}
											itemData={intelligent_mix_list}
											outerRef={setDroppableRef}
											itemKey={(index, data) => data[index].mtKey}
										>
											{rowRenderer}
										</List>
									)}
								</Droppable>
							</DragDropContextProvider>
						)}
					</AutoSizer>
				)}
				{mode === 2 && (
					<AutoSizer>
						{({ width, height }) => (
							<DragDropContextProvider>
								<Droppable onDrop={handleDrop}>
									{(setDroppableRef) =>
										custom_mix_list.length > 0 ? (
											<List
												width={width}
												height={height}
												itemCount={custom_mix_list.length}
												itemSize={32}
												itemData={custom_mix_list}
												outerRef={setDroppableRef}
												itemKey={(index, data) => data[index].mtKey}
											>
												{rowRenderer}
											</List>
										) : (
											<ListEmpty width={280} height={height} outerRef={setDroppableRef} />
										)
									}
								</Droppable>
							</DragDropContextProvider>
						)}
					</AutoSizer>
				)}
			</ListBody>
			<Modal
				open={isSavePlanOpen}
				title={t('保存预案')}
				width={400}
				height={300}
				okText={t('保存')}
				onOk={addPlan}
				onCancel={() => {
					update({ isSavePlanOpen: false })
				}}
				cancelText={t('取消')}
			>
				<StyledPlanModal>
					<div className="label">{t('预案名称')}</div>
					<Input
						width={250}
						placeholder={t('请输入预案名称')}
						focusMsg={t('预案名称最多可输入16个字符')}
						innerRef={inputRef}
						maxLength={16}
						rule={{
							required: {
								showIcon: false,
								msg: t('预案名称不能为空'),
							},
							regular: getCheckPreNameRule(SWITCH.characterLimit),
						}}
						value={name}
						onChange={(e, v) => update({ name: v })}
					/>
				</StyledPlanModal>
			</Modal>
		</RightWrap>
	)
}
export default Mix
